<template>
    <div>
        <a-table rowKey="id" size="small" :columns="tableColumns" :data-source="list" :pagination="false">
            <template #jhbgkssj="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #gdcljssj="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
        </a-table>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const tableColumns: Recordable[] = [
            {
                title: '所属产品',
                dataIndex: 'systemName'
            },
            {
                title: '工单编号',
                dataIndex: 'gdbh'
            },
            {
                title: '变更名称',
                dataIndex: 'bgmcwb'
            },
            {
                title: '工单状态',
                dataIndex: 'lcztgl'
            },
            {
                title: '变更申请人',
                dataIndex: 'bgsqr'
            },
            {
                title: '变更类型',
                dataIndex: 'bglx'
            },
            {
                title: '计划变更开始时间',
                dataIndex: 'jhbgkssj',
                slots: { customRender: 'jhbgkssj' }
            },
            {
                title: '工单结束时间',
                dataIndex: 'gdcljssj',
                slots: { customRender: 'gdcljssj' }
            },
            {
                title: '变更级别',
                dataIndex: 'fxpg_bgjb'
            },
            {
                title: '变更关闭结果',
                dataIndex: 'bggbbggbjg'
            }
        ];
        const state = reactive<any>({
            list: [],
            historyList: []
        });
        const getList = async () => {
            const query = {
                versionNumber: props.detail.versionNumber,
                systemName: props.detail.systemName
            };
            const { success, moule } = await api.versionModel.getChangeManagement(query);
            if (success) {
                state.list = [...moule];
                state.historyList = state.list.length > 1 ? state.list.slice(1) : [];
            }
        };
        getList();
        return {
            tableColumns,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
</style>